/**
 * @desc 上传组件
 * @props { bool } disabled 是否显示上传控件
 * @props { number | string } 上传数量
 */
import React from 'react'
import PropTypes from 'prop-types'
import {Upload, Modal} from 'antd';
import {PlusOutlined} from '@ant-design/icons';
import {withRouter} from 'react-router-dom'
import {getBase} from '@/utils/getBase'

class TheUpload extends React.Component {
    state = {
        previewVisible: false,
        previewImage: '',
        previewTitle: '',
        fileList: [],
    };

    componentDidMount() {
        if (this.props.fileList) {
            this.setState({fileList: this.props.fileList})
        }
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        const preFileList = JSON.stringify(prevProps.fileList)
        const fileList = JSON.stringify(this.props.fileList)
        if (preFileList !== fileList) {
            this.setState({
                fileList: this.props.fileList
            })
        }
    }

    handleCancel = () => this.setState({previewVisible: false});

    handlePreview = async file => {
        if (!file.url && !file.preview) {
            file.preview = await getBase(file.originFileObj);
        }
        this.setState({
            previewImage: file.url || file.preview,
            previewVisible: true,
            previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
        });
    };

    handleChange = ({fileList}) => {
        this.props.getFileResult(fileList, this.props.pid, this.props.index)
        this.setState({fileList})
    };

    render() {
        const {previewVisible, previewImage, fileList, previewTitle} = this.state;
        const {len, disabled, label} = this.props;
        const uploadButton = (
            <div>
                <PlusOutlined/>
                <div style={{marginTop: 8}}>{label}</div>
            </div>
        );
        return (
            <>
                <Upload
                    action={React.$BaseUrl+"/admin/image/upload"}
                    listType="picture-card"
                    fileList={fileList}
                    accept={'image/*'}
                    headers={{RSnetToken: sessionStorage.getItem('RSnetToken')}}
                    onPreview={this.handlePreview}
                    onChange={this.handleChange}>
                    {(fileList.length >= len || disabled) ? null : uploadButton}
                </Upload>
                <Modal
                    visible={previewVisible}
                    title={previewTitle}
                    footer={null}
                    onCancel={this.handleCancel}>
                    <img alt="example" style={{width: '100%'}} src={previewImage}/>
                </Modal>
            </>
        );
    }
}

TheUpload.propTypes = {
    disabled: PropTypes.bool,//上传按钮是否显示
    len: PropTypes.number,//最大上传数量
    label: PropTypes.string,
    getFileResult: PropTypes.func,
    pid: PropTypes.number,
    index: PropTypes.number
}
TheUpload.defaultProps = {
    disabled: false,
    len: 5,
    label: 'Upload'
}
export default withRouter(TheUpload)